<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <title>Change map style at runtime</title>
    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
    <link rel="stylesheet" type="text/css" href="demo.css" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <link rel="stylesheet" type="text/css" href="../template.css" />
    <script type="text/javascript" src='../test-credentials.js'></script>    
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
  </head>
  <body id="markers-on-the-map">
    <div class="page-header">
        <h1>Change map style at runtime</h1>
        <p>Change a style of the map feature when map is instantiated</p>
    </div>
    <p>This example shows how to change map feature style during the map runtime. The map is loaded with the default "normal.map" style, after that
      the color of the features "landuse.park" and "landuse.builtup" is changed to the dark green and the dark grey accordingly. 
    </p>
    <div id="map"></div>
    <h3>Code</h3>
    <p>The code below adds a <codeph>change</codeph> event listener to the instence of the <code>H.map.Style</code> associated with the
      layer's provider. Within this listener the section of the map style is extracted and modified and merged back to the original style.
      That results in the changed colors for the "landuse.park" and "landuse.builtup" map features.
    </p>
    <script type="text/javascript" src='demo.js'></script>
  </body>
</html>
